<template>
  <div class="adlist">
    <div style="margin-top: 5px; text-align: center;">
      <b>总费用：</b><span style="color: red;">{{zzhh}}</span><b>总已付：</b><span
      style="color: red;">{{yfkjezz}}</span><b>总剩余：</b><span style="color: red;">{{wfkzz}}</span>
      <br/>
      <el-input v-model="wst" placeholder="材料/工种/位置/品牌/材料备注"></el-input>
      <br/>
      <el-button type="primary" @click="runinsert">新增</el-button>
      <el-button type="info" @click="queryData">查询</el-button>
      <el-button type="info" @click="runback">返回</el-button>
    </div>
    <div class="shenti">
      <div>
        <div class="xxlist" v-for="(item, index) in zxItems" :key="index">
          <ul>
            <li>
              <div class="list_z tzgg">
                <div style="float: left; width: 80%" @click="goDetailgg(item.guid)"><p>{{item.title}}<span
                  v-if="item.dj!=0">（单价：{{item.dj}}）</span><span
                  v-if="item.yfkje!=0">【已付：{{item.yfkje}}】</span><span
                  v-if="item.zh!=0">【总：{{item.zh}}】</span></p></div>
                <div style="float:right;">
                  <el-button type="danger" @click="rundelete(item.guid)">删除</el-button>
                </div>
                <div class="price"><span>{{item.addr}}</span><span>{{item.isfk}}</span></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div style="text-align: center;">
        <b>总费用：</b><span style="color: red;">{{zzhh}}元</span>
        <br/>
        <el-button type="primary" style="width: 100px;" @click="runinsert">新增</el-button>
        <el-button type="info" style="width: 100px;" @click="runback">返回</el-button>
      </div>
    </div>

  </div>

</template>

<script>

  import {
    Search,
    XButton,
    Divider,
    Cell,
    CellBox,
    Group,
    Scroller,
    Swiper,
    SwiperItem,
    Alert,
    TransferDomDirective as TransferDom
  } from 'vux'

  export default {
    components: {
      Search,
      XButton,
      Divider,
      Cell,
      CellBox,
      Alert,
      Group,
      Scroller, Swiper, SwiperItem
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        msg: 'hello vue',
        tabNumber: 0,
        bTop: "0",
        pi: 1,
        count: 10,
        userGuid: '',
        alertShow: false,
        alertMessage: '',
        userInfo: {accountId1: '',},
        totalRow: 0,
        zxItems: [],//咨询列表
        demoValue: {pullupStatus: ''},
        pullupConfig: {content: '上拉加载更多', downContent: '松开进行加载', upContent: '上拉加载更多', loadingContent: '加载中...'},
        alertMessage: '',
        alerttype: 'info',
        zzh: 0,
        yfkjez: 0,
        wfkz: 0,
        wst: ''
      }
    },
    computed: {
      zzhh: function () {
        this.zzh = 0;
        for (let i = 0; i < this.zxItems.length; i++) {
          if (this.zxItems[i].zh == '' || this.zxItems[i].zh == null || this.zxItems[i].zh == undefined) {
            this.zzh = this.zzh + 0;
            console.log(this.zxItems[i].zh);
          }
          else {
            this.zzh = this.zzh + parseInt(this.zxItems[i].zh);
          }
        }
        return this.zzh;
      },
      yfkjezz: function () {
        this.yfkjez = 0;
        for (let i = 0; i < this.zxItems.length; i++) {
          if (this.zxItems[i].yfkje == '' || this.zxItems[i].yfkje == null || this.zxItems[i].yfkje == undefined) {
            this.yfkjez = this.yfkjez + 0;
            console.log(this.zxItems[i].yfkje);
          }
          else {
            this.yfkjez = this.yfkjez + parseInt(this.zxItems[i].yfkje);
          }
        }
        return this.yfkjez;
      },
      wfkzz: function () {
        this.wfkz = 0;
        this.wfkz = parseInt(this.zzh) - parseInt(this.yfkjez);
        return this.wfkz;
      },
    },
    created() {
      this.queryData();
    },
    mounted() {
      this.queryData();
    },
    methods: {
      goDetailgg: function (guid) {
        let self = this;
        self.$router.push('/zxxx/InfoDetailnew/' + guid);
      },
      queryData: function () {
        let self = this;
        let urlget = '';
        if (self.wst == '' || self.wst == null || self.wst == undefined) {
          urlget = global.baseApiUrl + '/ZXXX/selectZInfo';
        }
        else {
          urlget = global.baseApiUrl + '/ZXXX/selectZInfowst?wst=' + self.wst;
        }
        self.axios.get(urlget).then(function (response) {
          console.log(response);
          self.zxItems = [];
          if (response.data.data.length > 0) {
            let d = response.data.data;
            for (let i = 0; i < d.length; i++) {
              let isfkname = '已付款';
              if (d[i].isfk == '0') {
                isfkname = '未付款';
              }
              if (d[i].isfk == '2') {
                isfkname = '付款中';
              }
              var row = {
                title: d[i].cname,
                isfk: isfkname,
                addr: d[i].addr,
                guid: d[i].guid,
                dj: d[i].dj,
                zh: d[i].zh,
                yfkje: d[i].yfkje,
              }
              self.zxItems.push(row);
            }
          }
        }).catch(function (response) {
          console.log(response);
        });
      },
      load_yhf: function () {
        setTimeout(() => {
          //1.先截取原生传入的userGuid
          let self = this;
          self.axios.get(global.baseApiUrl + '/ZXXX/selectZInfo').then(function (response) {
            console.log("-----222222-------")
            console.log(response)
            self.zxItems = [];
            if (response.data.data.list > 0) {
              let d = response.data.data;
              for (let i = 0; i < d.length; i++) {
                var row = {
                  title: d[i].cname,
                  isfk: d[i].isfk,
                  addr: d[i].addr,
                  guid: d[i].guid,
                }
                self.zxItems.push(row)
              }
            }
            self.pi = self.pi + 1;
            self.totalRow = response.data.data.totalRow;
            if (self.totalRow == 0 || self.totalRow < self.count) {
              setTimeout(() => {
                self.demoValue.pullupStatus = 'disabled'
              }, 100)
            }
          }).catch(function (response) {
            console.log(response);
          });
          setTimeout(() => {
            this.demoValue.pullupStatus = 'default'
          }, 100)
          if (this.pi * this.count >= this.totalRow) { // unload plugin
            setTimeout(() => {
              this.demoValue.pullupStatus = 'disabled'
            }, 100)
          }
        }, 2000)
      },
      runinsert: function () {
        this.$router.replace({path: '/zxxx/InfoCreate'});
      },
      runback: function () {
        this.$router.replace({path: '/'});
      },
      rundelete: function (guid) {
        if (confirm("确认要删除？")==true){
          console.log(guid);
          let self = this;
          self.axios.get(global.baseApiUrl + '/ZXXX/deleteZInfo/' + guid).then(function (response) {
            console.log(response);
          });
          self.axios.get(global.baseApiUrl + '/ZXXX/deleteZConfiginfo/' + guid).then(function (response) {
            console.log(response);
          });
          self.queryData();
          _self.alerttype = "success";
          _self.alertMessage = "保存成功";
          _self.message();
        }
      },
      message() {
        this.$message({
          type: this.alerttype,
          message: `消息: ${ this.alertMessage }`
        });
      }
    }
  }
</script>
<style type="text/css" scoped>
  .no_contant {
    width: 100%;
    font-size: 16px;
    color: #aaa;
    text-align: center;
    line-height: 35px;
    padding: 10px 0;
  }

  .adlist {
    width: 100%;
    height: 100%;
    float: left;
  }

  .adlist .dingbu {
    width: 100%;
    height: 46px;
    float: left;
    position: fixed;
    z-index: 150
  }

  .adlist .dingbu .top {
    width: 100%;
    height: 46px;
    float: left;
    background: #FFFFFF;
    position: relative;
    z-index: 100;
  }

  .adlist .dingbu .top .fh_jt {
    width: 46px;
    height: 46px;
    float: left;
    line-height: 46px;
    background: #3773d2;
  }

  .adlist .dingbu .top .fh_jt img {
    width: 30px;
    height: 30px;
    float: left;
    margin: 6px;
  }

  .adlist .dingbu .top .top_an {
    width: 100%;
    height: 46px;
    float: left;
    line-height: 46px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .adlist .shenti {
    width: 100%;
    height: 100%;
    float: left;
    box-sizing: border-box;
  }

  /*background: #F2F2F2;*/
  .adlist .shenti .xxlist {
    width: 100%;
    float: left;
    padding: 0 10px;
    box-sizing: border-box;
    background: #ffffff;
  }

  .adlist .shenti .xxlist:last-child ul li {
    border-bottom: none;
  }

  .adlist .shenti .xxlist ul {
    width: 100%;
    float: left;
  }

  .adlist .shenti .xxlist ul li {
    width: 100%;
    height: 86px;
    float: left;
    position: relative;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #dadada;
  }

  .adlist .shenti .xxlist ul li .list_z {
    width: 100%;
    height: 80px;
    float: left;
    padding-right: 110px;
    box-sizing: border-box;
  }

  .adlist .shenti .xxlist ul li .list_z.tzgg {
    padding-right: 0px;
  }

  .adlist .shenti .xxlist ul li .list_z p {
    width: 100%;
    height: 46px;
    float: left;
    line-height: 22px;
    display: block;
    font-size: 16px;
    color: #000000;
    margin: 0;
    overflow: hidden;
  }

  .adlist .shenti .xxlist ul li .list_z .price {
    width: 100%;
    height: 20px;
    float: left;
  }

  .adlist .shenti .xxlist ul li .list_z .price span:nth-child(1) {
    height: 20px;
    float: left;
    line-height: 25px;
    color: #A6A6A6;
    font-size: 12px;
  }

  .adlist .shenti .xxlist ul li .list_z .price span:nth-child(2) {
    height: 20px;
    float: right;
    line-height: 25px;
    font-size: 10px;
    color: #A6A6A6;
  }

  .adlist .shenti .xxlist ul li .picture {
    width: 100px;
    height: 66px;
    float: right;
    position: absolute;
    top: 10px;
    right: 0px;
  }

  .adlist .shenti .xxlist ul li .picture img {
    width: 100%;
    height: 100%;
  }

  .adlist .jzgg {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    padding: 5px;
  }

  .adlist .jzgg img {
    width: 18px;
    height: 18px;
    display: inline-block;
  }

  .adlist .jzgg p {
    width: 80px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    display: inline-block;
    font-size: 12px;
    color: #B0B0B0;
    position: relative;
  }

  .adlist .jzgg p span {
    width: 100px;
    height: 20px;
    line-height: 22px;
    font-size: 12px;
    color: #B0B0B0;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
  }

  .adlist .jzgg1 {
    width: 100%;
    height: 30px;
    float: left;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    color: #B0B0B0;
  }

  .geng_duo {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: none;
    z-index: 100;
    position: fixed;
    bottom: 10px;
    right: 10px;
  }

  .geng_duo img {
    width: 100%;
    height: 100%;
  }

  /*滑动图片区*/
  .datu {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    background: url(../../../static/img/ios.png) no-repeat;
    background-size: 100% 100%;
  }

  .swiper-wrapper {
    width: 100%;
    height: 180px;
    float: left;
  }

  .swiper-slide {
    float: left;
    position: relative;
    width: 100%
  }

  .swiper-slide img {
    width: 100%;
    height: 180px;
  }

  .swiper-slide p {
    display: block;
    margin: 0;
    width: 100%;
    height: 26px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .swiper-slide p span {
    display: block;
    float: right;
    width: 75%;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #FFFFFF;
    text-align: right;
    margin-right: 2%;
  }

  /*动态圆点*/
  .pagination {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 26px;
    width: 100%;
    z-index: 50;
  }

  .pagination .swiper-pagination-switch {
    float: left;
    width: 6px;
    height: 6px;
    margin-left: 2%;
    background: #FFFFFF;
    border-radius: 100%;
    margin-top: 10px;
  }

  .pagination .swiper-active-switch {
    width: 6px;
    height: 6px;
    background: #3091e3;
    border-radius: 100%;
  }


</style>
<style type="text/css">
  .adlist .dingbu .top .vux-tab {
    height: 46px;
  }

  .adlist .shenti .vux-slider {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .adlist .shenti .vux-slider > .vux-swiper {
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
<!--/*overflow-x: scroll;*padding-left: 50px;  box-sizing: border-box;position: absolute;top: 0; left: 0;/-->


